<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>KRY会议室管理系统</title>
<meta name="description" content="这是一个form页面">
<meta name="keywords" content="form">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="assets/css/amazeui.min.css" />
<link rel="stylesheet" href="assets/css/admin.css">
<style>
 .alertWindowStyle {
    height: 225px;
    width: 400px;
}
</style>
</head>
<body>
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

	<header class="am-topbar am-topbar-inverse admin-header">
		<div class="am-topbar-brand">
			<strong>KRY</strong> <small>会议室管理系统</small>
		</div>

		<button
			class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
			data-am-collapse="{target: '#topbar-collapse'}">
			<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
		</button>

		<div class="am-collapse am-topbar-collapse" id="topbar-collapse">

			<ul
				class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
				<li><a href="javascript:;"><span class="am-icon-envelope-o"></span>
						收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
				<li class="am-dropdown" data-am-dropdown><a class="am-dropdown-toggle"
					data-am-dropdown-toggle href="javascript:;"> <span
						class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
				</a>
					<ul class="am-dropdown-content">
						<li><a href="admin-user.html"><span class="am-icon-user"></span>
								资料</a></li>
						<li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
						<li><a id="signOut1" href="javascript:void(0)"><span
								class="am-icon-power-off"></span> 退出</a></li>
					</ul></li>
				<li class="am-hide-sm-only"><a href="javascript:;"
					id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span
						class="admin-fullText">开启全屏</span></a></li>
			</ul>
		</div>
	</header>

	<div class="am-cf admin-main">
		<!-- sidebar start -->
		<div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
			<div class="am-offcanvas-bar admin-offcanvas-bar">
				<ul class="am-list admin-sidebar-list">
					<li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li>
					<li class="admin-parent"><a class="am-cf"
						data-am-collapse="{target: '#collapse-nav'}"><span
							class="am-icon-file"></span> 会员 <span
							class="am-icon-angle-right am-fr am-margin-right"></span></a>
						<ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
							<li><a href="admin-user.html" class="am-cf"><span
									class="am-icon-check"></span> 个人资料<span
									class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li>
							<li><a href="admin-gallery.html"><span class="am-icon-th"></span> 会议室浏览<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li>
						</ul></li>
					<li><a href="admin-table.html"><span class="am-icon-table"></span> 预定记录</a></li>
					<li><a href="admin-form.html"><span
							class="am-icon-pencil-square-o"></span> 预定</a></li>
					<li><a id="signOut2" href="javascript:void(0)"><span
							class="am-icon-sign-out"></span> 注销</a></li>
				</ul>

				<div class="am-panel am-panel-default admin-sidebar-panel">
					<div class="am-panel-bd">
						<p>
							<span class="am-icon-bookmark"></span> 公告
						</p>
						<p>热爱生活，团队制胜，快学快用，超越极致。<br>—— KRY</p>
					</div>
				</div>

				
			</div>
		</div>
		<!-- sidebar end -->



		<!-- content start -->
		<div class="admin-content">
			<div class="admin-content-body">
				<div class="am-cf am-padding am-padding-bottom-0">
					<div class="am-fl am-cf">
						<strong class="am-text-primary am-text-lg">会议室管理</strong> / <small>预定</small>
					</div>
				</div>

				<hr>

				<div class="am-tabs am-margin" data-am-tabs>
					<ul class="am-tabs-nav am-nav am-nav-tabs">
						<li class="am-active"><a href="#tab1">预定</a></li>
						<li><a href="#tab2">详情</a></li>
						<li><a href="#tab3">SEO 选项</a></li>
					</ul>

					<div class="am-tabs-bd">
						<div id="tab1" class="am-tab-panel am-fade am-in am-active" >
						<form id="bookingFormId" class="am-form  am-form-inline">
							
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">城市</div>
								<div class="am-u-sm-8 am-u-md-10">
									<select id="roomSelectId" name="cityCode" data-am-selected="{btnSize: 'sm'}" onchange="getRoom();">
										<option value="010">北京</option>
										<option value="028" selected>成都</option>
										<option value="0755">深圳</option>
									</select>
								</div>
							</div>
							
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">会议日期</div>
								<div class="am-u-sm-8 am-u-md-10">
								    <div class="am-form-group am-form-icon">
                                        <i class="am-icon-calendar"></i>
                                        <input type="text" id="bookDateId" name="bookDate" class="am-form-field" placeholder="请选择" 
                                               data-am-datepicker="{format: 'yyyy-mm-dd'}" readonly required  onchange="getRoom();" />  <!-- onchange="getRoom();" -->
									<!-- <form action="" class="am-form am-form-inline"> 
										<div class="am-form-group am-form-icon">
											<i class="am-icon-calendar"></i> 
											<input type="date"class="am-form-field am-input-sm" placeholder="日期"> 
										</div>
									</form> -->
									</div>
								</div>
							</div>
							
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">远程视频</div>
								<div class="am-u-sm-8 am-u-md-10">
									<div class="am-btn-group" data-am-button>
										<label class="am-btn am-btn-secondary am-btn-xs"> 
										       <input  type="radio" name="isVideo" id="isVideo1"  value=1 checked onchange="getRoom();"> 需要
										</label> 
										<label class="am-btn am-btn-secondary am-btn-xs"> 
										       <input  type="radio" name="isVideo" id="isVideo2"  value=0 onchange="getRoom();"> 不需要
										</label> 
										<label class="am-btn am-btn-secondary am-btn-xs"> 
										       <input  type="radio" name="isVideo" id="isVideo3"  value=-1 onchange="getRoom();"> 皆可
										</label> 
									</div>
								</div>
							</div>
							
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">会议室类型</div>
								<div class="am-u-sm-8 am-u-md-10">
									<div class="am-btn-group" data-am-button>
										<label class="am-btn am-btn-secondary am-btn-xs"> 
										       <input  type="radio" name="capacity" id="capacity1" value=1 onchange="getRoom();"> 大型
										</label> 
										<label class="am-btn am-btn-secondary am-btn-xs"> 
										       <input  type="radio" name="capacity" id="capacity2" value=2 onchange="getRoom();"> 中型
										</label> 
										<label class="am-btn am-btn-secondary am-btn-xs"> 
										       <input  type="radio" name="capacity" id="capacity3" value=3 checked onchange="getRoom();"> 小型
										</label> 
										<label class="am-btn am-btn-secondary am-btn-xs"> 
										       <input  type="radio" name="capacity" id="capacity4"value=4 onchange="getRoom();"> 会客厅
										</label> 
									</div>
								</div>
							</div>
							
							
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">会议室</div>
								<div class="am-u-sm-8 am-u-md-10">
									<select id="roomNoId" name="roomNo" data-am-selected="{btnSize: 'sm'}" placeholder="请选择">
										<!-- 
										<option value="10028001">硅谷</option>
										<option value="10028002" selected>新加坡</option>
										<option value="10028003">伦敦</option>
										<option value="10028004">巴黎</option>
										 -->
									</select>
								</div>
							</div>

							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">开始时间</div>
								<div class="am-u-sm-8 am-u-md-10">
									<select id="startTimeId" name="startTime" data-am-selected="{btnWidth: '21%', btnSize: 'sm', btnStyle: 'primary',maxHeight: 100}" required>
										<option value="09:00">09:00</option>
										<option value="09:30" selected >09:30</option>
										<option value="10:00">10:00</option>
										<option value="10:30">10:30</option>
										<option value="11:00">11:00</option>
										<option value="11:30">11:30</option>
										<option value="12:00">12:00</option>
										<option value="12:30">12:30</option>
										<option value="13:00">13:00</option>
										<option value="13:30">13:30</option>
										<option value="14:00">14:00</option>
										<option value="14:30">14:30</option>
										<option value="15:00">15:00</option>
										<option value="15:30">15:30</option>
										<option value="16:00">16:00</option>
										<option value="16:30">16:30</option>
										<option value="17:00">17:00</option>
										<option value="17:30">17:30</option>
										<option value="18:00">18:00</option>
										<option value="18:30">18:30</option>
										<option value="19:00">19:00</option>
									</select>
								</div>
							</div>
                            
                            <div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">结束时间</div>
								<div class="am-u-sm-8 am-u-md-10">
									<select id="endTimeId" name="endTime" data-am-selected="{btnWidth: '21%', btnSize: 'sm', btnStyle: 'secondary',maxHeight: 100}" required>
										<option value="09:00">09:00</option>
										<option value="09:30">09:30</option>
										<option value="10:00">10:00</option>
										<option value="10:30" selected >10:30</option>
										<option value="11:00">11:00</option>
										<option value="11:30">11:30</option>
										<option value="12:00">12:00</option>
										<option value="12:30">12:30</option>
										<option value="13:00">13:00</option>
										<option value="13:30">13:30</option>
										<option value="14:00">14:00</option>
										<option value="14:30">14:30</option>
										<option value="15:00">15:00</option>
										<option value="15:30">15:30</option>
										<option value="16:00">16:00</option>
										<option value="16:30">16:30</option>
										<option value="17:00">17:00</option>
										<option value="17:30">17:30</option>
										<option value="18:00">18:00</option>
										<option value="18:30">18:30</option>
										<option value="19:00">19:00</option>
									</select>
								</div>
							</div>
							
							<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">预定人</div>
									<div class="am-u-sm-8 am-u-md-4 am-u-end">
										<input type="text" class="am-input-sm" name="booker" id="bookerId" required placeholder="请录入预定人"/>
									</div>
						    </div>	
							<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">会议主题</div>
									<div class="am-u-sm-8 am-u-md-4 am-u-end">
										<input type="text" class="am-input-sm" name="theme" id="themeId" maxlength=50 />
									</div>
						    </div>	
							<div class="am-g am-margin-top am-hide">
									<div class="am-u-sm-12 am-u-md-2 am-text-right admin-form-text">会议纪要</div>
									<div class="am-u-sm-12 am-u-md-10">
										<textarea rows="10" name="cahier" id="cahierId" placeholder="请使用富文本编辑插件"></textarea>
									</div>
							</div>
							
							<div class="am-margin">
					             <input   type="reset" class="am-btn am-btn-danger am-btn-xs btn-loading-example" />
					             <button id="bookingSubmitBtn" type="button" class="am-btn am-btn-success am-btn-xs btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...'}">提交</button>
				            </div>
				            
				            <div class="am-modal am-modal-alert " tabindex="-1" id="submitSuccesAlertId">
                                 <div class="am-modal-dialog">
                                      <div class="am-modal-hd">恭喜您，预定成功！</div>
                                      <div class="am-modal-bd"> Hello world！ </div>
                                      <div class="am-modal-footer">
                                           <span class="am-modal-btn">确定</span>
                                      </div>
                                 </div>
                            </div>
						</form>
						</div>



						<div class="am-tab-panel am-fade" id="tab2">
							<form class="am-form">
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">文章标题</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm">
									</div>
									<div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
								</div>

								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">文章作者</div>
									<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
										<input type="text" class="am-input-sm">
									</div>
								</div>

								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">信息来源</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm">
									</div>
									<div class="am-hide-sm-only am-u-md-6">选填</div>
								</div>

								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">内容摘要</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm">
									</div>
									<div class="am-u-sm-12 am-u-md-6">不填写则自动截取内容前255字符</div>
								</div>

								<div class="am-g am-margin-top-sm">
									<div class="am-u-sm-12 am-u-md-2 am-text-right admin-form-text">
										内容描述</div>
									<div class="am-u-sm-12 am-u-md-10">
										<textarea rows="10" placeholder="请使用富文本编辑插件"></textarea>
									</div>
								</div>

							</form>
						</div>

						<div class="am-tab-panel am-fade" id="tab3">
							<form class="am-form">
								<div class="am-g am-margin-top-sm">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">SEO 标题</div>
									<div class="am-u-sm-8 am-u-md-4 am-u-end">
										<input type="text" class="am-input-sm">
									</div>
								</div>

								<div class="am-g am-margin-top-sm">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">SEO 关键字</div>
									<div class="am-u-sm-8 am-u-md-4 am-u-end">
										<input type="text" class="am-input-sm">
									</div>
								</div>

								<div class="am-g am-margin-top-sm">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">SEO 描述</div>
									<div class="am-u-sm-8 am-u-md-4 am-u-end">
										<textarea rows="4"></textarea>
									</div>
								</div>
							</form>
						</div>

					</div>
				</div>
                
				
				<!-- 
				<div class="am-margin">
					<button type="button" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
					<button type="button" class="am-btn am-btn-primary am-btn-xs">放弃保存</button>
				</div>
				 -->
			</div>

			<footer class="admin-content-footer">
				<hr>
				<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
			</footer>
		</div>
		<!-- content end -->

	</div>

	<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
		data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

	<footer>
		<hr>
		<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
	</footer>

	<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="assets/js/jquery.min.js"></script>
	<!--<![endif]-->
	<script src="assets/js/amazeui.min.js"></script>
	<script src="assets/js/app.js"></script>
	<script src="assets/js/admin/logout.js"></script>
</body>


<script type="text/javascript">

//表单验证
$(function() {
	
	  $('#bookingFormId').validator({
	    onValid: function(validity) {
	      $(validity.field).closest('.am-margin-top').find('.am-alert').hide();
	    },

	    onInValid: function(validity) {
	      var $field = $(validity.field);
	      var $group = $field.closest('.am-margin-top');
	      var $alert = $group.find('.am-alert');
	      // 使用自定义的提示信息 或 插件内置的提示信息
	      var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

	      if (!$alert.length) {
	        $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
	          appendTo($group);
	      }
	      $alert.html(msg).show();
	    }
	  });
	  
	
	 /*
	 $("#bookDateId").keyup(function(){
		 alert("The parabookDateIdgraph  keyup");

		});
	 */
	 /* $("#bookDateId").on("focus",function(){
		  alert("The parabookDateIdgraph  focused");
	  });
	 */
	  
	  
});	



//根据传入的radio的name获取被选中的radio的value
function   getRadioBoxValue(radioName) { 
            var obj = document.getElementsByName(radioName);  //这个是以标签的name来取控件
                 for(i=0; i<obj.length;i++)    {
                  if(obj[i].checked){ 
                          return   obj[i].value; 
                  } 
              }         
             return "-1";
}	

//获取可用会议室
function getRoom(){
 	var cityCode=$('#roomSelectId').val();
 	var isVideo=getRadioBoxValue("isVideo");
 	var type=getRadioBoxValue("capacity");
 	
 	$.ajax({
         url: '/meetingroom/list',
         type: "POST",
         cache: false, //实际使用中请禁用缓存
         async: false,
         data:{
         	cityCode:cityCode,
         	isVideo:isVideo,
         	capacity:type
         },
         dataType: 'json'
       }).then(function(data) {
     	 
     	 var roomList=data.result;
     	//$("#roomNoId").find("option").remove(); 
     	$("#roomNoId").html("");
     	 var optionStr="<option ></option>";
   		 for(var i in roomList){
   		    //alert(roomList[i].roomNo+'-'+roomList[i].roomName);  
   		    optionStr+="<option value='"+roomList[i].roomNo+"'>"+roomList[i].roomName+"</option>" ;
          };  
           //alert(optionStr);
   		   $("#roomNoId").append(optionStr);
   	     
   		 /*
      	 $.each(roomList,function(n,value) {   
              alert(n+' : '+value.roomNo+"--"+value.roomName);         
         }); 
      	 */
         
       }, function() {
         alert("没有查询到数据？？？");
       });
 	
 	
 }	 	
	
	
//提交会议室预定	
$('#bookingSubmitBtn').click(function () {
   /* var $btn = $(this)
	$btn.button('loading');
	setTimeout(function(){
		$btn.button('reset');
		$('bookingFormId').submit();
	}, 2000);*/
	
        $.ajax({
				cache: true,
				type: "POST",
				url:"/record/save",
				data:$('#bookingFormId').serialize(),// 你的formid
				async: false,
			    error: function(request) {
			        alert("提交失败");
			    },
			    success: function(data) {
			    	var code=data.code;
			    	if(code==0){
	                      $('#submitSuccesAlertId').modal();
			    	}else{
			    		 alert("提交失败!");
			    	}
				   // $("#commonLayout_appcreshi").parent().html(data);
			    }
			});
	
});




</script>
</html>
